<template>
  <div class="circle-container">
    <div class="rotating-circle">
      <svg viewBox="0 0 300 300" class="circle-svg">
        <path
          id="circlePath"
          d="M 150, 150 m -120, 0 a 120,120 0 1,1 240,0 a 120,120 0 1,1 -240,0"
          fill="none"
        />
        <text class="circle-text">
          <textPath xlink:href="#circlePath" startOffset="0%">
            Make an Appointment Now Ru tang
          </textPath>
        </text>
      </svg>
    </div>
    <div class="center-text">
      <div>看看我们</div>
      <div>的答案</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

onMounted(() => {
  // 可以在这里添加额外的初始化逻辑
});
</script>

<style lang="scss" scoped>
.circle-container {
  position: relative;
  width: 9rem;
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.8);
}

.rotating-circle {
  position: absolute;
  width: 100%;
  height: 100%;

  border-radius: 50%;
  background: linear-gradient(102deg, #b39efd 14.32%, #fa63c0 75.26%);
  animation: rotate 20s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.circle-text {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 1.4rem; /* 从8px增大到14px */
  letter-spacing: 3px; /* 从1px增大到1.5px */
  word-spacing: 14px; /* 从4px增大到5px */
  text-transform: uppercase;
  font-weight: 400; /* 从300增大到400，使字体更粗一些 */
}

.center-text {
  position: absolute;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  z-index: 10;
  line-height: 1.5;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
